<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>Multiparty Meeting</title>
	</head>
	<style>
		body
		{
			margin:auto;
			padding:0.5vmin;
			text-align:center;
			position: fixed;
			left: 50%;
			top: 40%;
			width: 90%;
			transform: translate(-50%, 0%);
			background-image: url('/images/background.jpg');
			background-attachment: fixed;
			background-position: center;
			background-size: cover;
			background-repeat: repeat;
		}
		input:hover { opacity:0.9; }
		input[type=text]
		{
			font-size: 1.5em;
			padding: 1.5vmin;
			background-color: rgba(0,0,0,0.3);
			border: 0;
			color: #fff;
			margin: 0.8vmin;
			width: 50%;
		}

		button:hover { background-color: #f5f5f5; }
		button
		{
			font-size: 1.5em;
			padding: 1.5vmin;
			margin: 0.8vmin;
			background-color: #fafafa;
			border-radius: 1.8vmin;
			color: #000;
			border: 0;
		}
		img
		{
			height: 15vmin;
		}
	</style>
	<body>
		<a>
			<img src='/images/logo.svg'></img><br />
		</a>
		<input id='room' type='text' onkeypress='checkEnter(event)' value='' placeholder='your room name' />
		<button onclick = 'start(location.href)'>Go to room</button>
	</body>
	<script>
		let room = document.getElementById('room');
		let stateObj = { foo: 'bar' };

		room.addEventListener('input', (e) =>
		{
			console.log(e.charCode);
			history.replaceState(stateObj, 'Multiparty Meeting', '/'+room.value);
		}, true);

		room.focus();

		function start(target)
		{
			location.href;history.replaceState(stateObj, 'Multiparty Meeting', '/');
			window.location = target;
		}

		function checkEnter(event)
		{
			let x = event.charCode || event.keyCode;
			if (x == 13 )
			{
				start(location.href);
			}
		}
	</script>
</html>
